<template>
  <div>
    <Header>
      <el-button size="small" type="primary" @click="levelTag('', 'all')"
        >修改等级</el-button
      >
      <el-button size="small" type="primary" @click="chainTag('', 'all')"
        >修改绑定关系</el-button
      >
      <el-button size="small" type="primary" @click="pointTag"
        >指定用户</el-button
      >
    </Header>
    <Header :type="'screening'" @tag="getList" @reset="reset">
      <div class="head-tit">
        内容筛选
      </div>
      <div class="head-operation">
        <span class="head-label">
          选择等级：
        </span>
        <el-select
          v-model="selectVal"
          placeholder="请选择"
          size="small"
          class="head-input"
        >
          <el-option
            v-for="item in options"
            :key="item.distribute_lv_id"
            :label="item.name"
            :value="item.distribute_lv_id"
          >
          </el-option>
        </el-select>
        <span class="head-label">
          选择状态：
        </span>
        <el-select
          v-model="selectValTwo"
          placeholder="请选择"
          size="small"
          class="head-input"
        >
          <el-option
            v-for="item in optionsTwo"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span class="head-label">
          内容搜索：
        </span>
        <el-input
          v-model="searchName"
          placeholder="请输入名称"
          size="small"
          class="head-select-input"
        >
          <el-select
            slot="prepend"
            v-model="selectThree"
            style=" width: 126px;"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionsThree"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-input>
      </div>
      <div class="head-operation">
        <span class="head-label">
          选择时间：
        </span>
        <div class="head-time">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right"
            style="width:100%;"
            size="small"
          >
          </el-date-picker>
        </div>
      </div>
    </Header>

    <Main
      :data="listData"
      :footer-lock="totals > 10"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        label="分销员名称"
        align="center"
        property="nick_name"
      ></el-table-column>
      <el-table-column label="分销员头像" align="center">
        <template slot-scope="scope">
          <img
            :src="$store.state.qiniu + scope.row.cover + $store.state.imgRotate"
            width="80px"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="等级"
        align="center"
        property="distribute_name"
      ></el-table-column>
      <el-table-column
        label="绑定客户数"
        align="center"
        property="members"
      ></el-table-column>
      <el-table-column
        label="成为分销员时间"
        align="center"
        property="distribute_time"
      ></el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.distribute_status == 1" style="color:#67C23A;">
            正常
          </span>
          <span v-if="scope.row.distribute_status == 2" style="color:#F56C6C;">
            冻结
          </span>
          <span v-if="scope.row.distribute_status == 3" style="color:#F56C6C;">
            已离职
          </span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center">
        <template slot-scope="scope">
          <span> {{ scope.row.remarks }}&nbsp;&nbsp; </span>
          <i
            class="el-icon-edit"
            style="cursor: pointer;"
            @click="remark(scope.row.member_id)"
          ></i>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="250"
        class-name="tableoperation"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.distribute_status === 1"
            size="mini"
            type="text"
            @click="freezeTag(scope.row, 2)"
          >
            冻结
          </el-button>
          <el-button
            v-if="scope.row.distribute_status === 2"
            size="mini"
            type="text"
            @click="freezeTag(scope.row, 1)"
          >
            解除冻结
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="levelTag(scope.row, 'single')"
          >
            修改等级
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="chainTag(scope.row, 'single')"
          >
            修改关系
          </el-button>
        </template>
      </el-table-column>
    </Main>
    <Footer :total="totals">
      <el-pagination
        class="foot-operation-pagination"
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
    </Footer>
    <freeze :visible="visible === 'freeze'" :val="Val" @outDialog="outDialog" />
    <level :visible="visible === 'level'" :val="Val" @outDialog="outDialog" />
    <chain :visible="visible === 'chain'" :val="Val" @outDialog="outDialog" />
    <point :visible="visible === 'point'" @outDialog="outDialog" />
  </div>
</template>
<script>
import { DISTRIBUTORLIST, DEFAULTBILI, SETREMARKS } from "../../service";

export default {
  components: {
    freeze: () => import("./component/freeze"),
    level: () => import("./component/level"),
    chain: () => import("./component/chain"),
    point: () => import("./component/point")
  },
  data() {
    return {
      listData: [],
      Arr: [],
      selectVal: 0,
      selectValTwo: 0,
      selectThree: 0,
      options: [],
      optionsTwo: [
        { label: "全部状态", value: 0 },
        { label: "正常", value: 1 },
        { label: "已冻结", value: 2 }
      ],
      optionsThree: [
        { label: "分销员昵称", value: 0 },
        { label: "分销员手机号", value: 1 }
      ],
      totals: 0,
      pages: 0,
      shows: "list",
      searchName: "",
      time: [],
      visible: "",
      Val: {}
    };
  },

  created() {
    this.getList();
    this.default();
  },
  methods: {
    async remark(id) {
      await this.$prompt("请输入备注", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator: t => {
          if (t.length > 6) {
            return false;
          } else {
            return true;
          }
        },
        inputErrorMessage: "长度不能大于6"
      })
        .then(({ value }) => {
          SETREMARKS({ member_id: id, remarks: value }).then(
            ({ code, msg }) => {
              if (code === 200) this.getList();
              this.$message({
                message: msg,
                type: code === 200 ? "success" : "error"
              });
            }
          );
        })
        .catch(() => {});
    },
    handleSelectionChange(e) {
      this.Arr = e;
    },
    freezeTag(e, type) {
      this.Val = e;
      this.Val.type = type;
      this.visible = "freeze";
    },
    levelTag(e, type) {
      if (type === "all") {
        let arr = [];
        this.Arr.forEach(ele => {
          arr.push(ele.member_id);
        });
        if (arr.length <= 0) return this.$message("请选择分销员！");
        this.Val.member_ids = arr.join(",");
      } else {
        this.Val.member_ids = e.member_id;
        this.Val.distribute_name = e.distribute_name;
        this.Val.distribute_lv_id = e.distribute_lv_id;
      }
      this.visible = "level";
    },
    chainTag(e, type) {
      if (type === "all") {
        let arr = [];
        this.Arr.forEach(ele => {
          arr.push(ele.member_id);
        });
        if (arr.length <= 0) return this.$message("请选择分销员！");
        this.Val.member_ids = arr.join(",");
      } else {
        this.Val.member_ids = e.member_id;
      }
      this.Val.type = type;
      this.visible = "chain";
    },
    pointTag() {
      let arr = [];
      this.Arr.forEach(ele => {
        arr.push(ele.member_id);
      });
      this.Val.member_ids = arr.join(",");
      this.visible = "point";
    },
    outDialog(v) {
      if (v) {
        this.getList();
      }
      this.visible = "";
      this.Val = {};
    },
    async default() {
      await DEFAULTBILI().then(({ code, data }) => {
        if (code === 200) {
          data.unshift({ name: "全部等级", distribute_lv_id: 0 });
          this.options = data;
        }
      });
    },
    reset() {
      this.searchName = "";
      this.selectVal = "";
      this.selectValTwo = "";
      this.selectThree = 0;
      this.time = [];
      this.getList();
    },
    async getList() {
      let param = {
        page: this.pages,
        pageshow: 10,
        flag: "user",
        stime: this.time ? this.time[0] : "",
        etime: this.time ? this.time[1] : 0,
        status: this.selectValTwo,
        distribute_lv_id: this.selectVal
      };
      if (this.selectThree === 0) {
        param.nick_name = this.searchName;
      } else {
        param.phone = this.searchName;
      }
      await DISTRIBUTORLIST(param).then(({ code, data, msg }) => {
        if (code === 200) {
          this.totals = data.count;
          this.listData = data.list;
        } else {
          this.totals = 0;
          this.listData = [];
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>
